package ;
import easelhx.display.Container;
import easelhx.display.Graphics;
import easelhx.display.Shape;
import easelhx.display.Text;
import easelhx.events.MouseEvent;
import easelhx.geom.Point;
import easelhx.utils.Ticker;
import js.Lib;

/**
 * ...
 * @author 
 */

class GlobalToLocal2Example extends Example
{
	
	private var _mouseIsDown:Bool;
	private var _mouseX:Float;
	private var _mouseY:Float;

	private var spin1:Container;		// nested invisble container to generate a spirograph effect
	private var spin2:Container;		// nested invisble container to generate a spirograph effect

	private var shape:Shape;		// drawing shape
	private var color:String;		// drawing color
	private var lastPt:Point;		// last draw position
	private var text:Text;
	private var graphics:Graphics;
	private var count:Int;
	private var colorOffset:Float;

	public function new() 
	{
		super();
		count = 0;
	}
	
	override public function run():Void 
	{
		super.run();
		
		// this prevents the stage from clearing, so we only draw one vector line each tick, and it
		// is painted onto the canvas, then removed.
		stage.autoClear = false;

		canvas.onmousemove = mouseMove;
		canvas.onmousedown = mouseDown;
		canvas.onmouseup = mouseUp;

		// Alpha Rectangle, applied each frame at the bottom, fading out the previous content over time.
		//var fade = new Shape(new Graphics().f("#333333").dr(0, 0, canvas.width, canvas.height));
		var g:Graphics = new Graphics().beginFill("#333333").drawRect(0, 0, canvas.width, canvas.height);
		var fade = new Shape(g);
		fade.alpha = 0.02;
		stage.addChild(fade);

		shape = new Shape();
		shape.y = 276;
		graphics = shape.graphics;

		// middle spinner:
		spin2 = new Container();
		spin2.addChild(shape);
		spin2.x = 391;

		// outside spinner:
		spin1 = new Container();
		spin1.addChild(spin2);
		spin1.x = canvas.width/2;
		spin1.y = canvas.height/2;
		stage.addChild(spin1);

		text = new Text("Click and Drag", "36px Arial", "#777777");
		text.x = 360; text.y = 200;
		stage.addChild(text);

		//start ticking
		Ticker.setInterval(20);		// 20ms = 50fps
		Ticker.addListener(this);

		stage.update(); // Draw the stage once
	}
	
	function tick() {
		//spin objects
		spin1.rotation += 10.7;
		spin2.rotation += -7.113;
		shape.rotation += 1.77;

		if(_mouseIsDown) {

			var color = Graphics.getHSL(
				Math.cos((count++)*0.1) * 30 + colorOffset,
				100,
				50,
				0.8);
			//Lib.alert(Math.cos((count++)*0.1) * 30 + colorOffset);
			graphics.setStrokeStyle(Math.random()*20,"round").beginStroke(color);
			graphics.moveTo(0,0);
			lastPt = shape.globalToLocal(_mouseX,_mouseY);
			graphics.lineTo(lastPt.x,lastPt.y);

			// draw the new vector line to the canvas:
			stage.update();

			// then clear the shape's vector data so it isn't rendered again next tick:
			graphics.clear();
		}
	}

	//start drawing
	private function mouseDown(e:MouseEvent) {
		if (e==null) { e = Reflect.field(Lib.window, "event"); }
		stage.removeChild(text);
		if (_mouseIsDown) { return; }
		_mouseIsDown = true;
		colorOffset = Math.random() * 360;
		lastPt = shape.globalToLocal(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
	}

	//stop drawing
	private function mouseUp() {
		_mouseIsDown = false;
	}

	//update mouse positions
	private function mouseMove(e:MouseEvent) {
		if (e==null) { e = Reflect.field(Lib.window, "event"); }
		_mouseX = e.pageX-canvas.offsetLeft;
		_mouseY = e.pageY-canvas.offsetTop;
	}

	
}